<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    @include('public.h5_head')
    <title>完善商品信息</title>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/information.css?v=1.0.2"/>
</head>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/common.js"></script>
<style>

    .infor_txt ,.img1{
        cursor: pointer;
    }
    .information_size{
        cursor: pointer;
    }
    .iconfont{
        cursor: pointer;
    }
</style>
<script>
    var detail_data=[
            @foreach($sizes as $info)
        [{{ $info->id }},'{{ $info->produc_type }}','{{ $info->produc_val }}',{{ $info->pid }}],
            @endforeach
        [-1,'','']
    ];
    function getstock(type,pid) {
        for(var i=0;i<detail_data.length;i++)
        {
            if(detail_data[i][1]==type && parseInt(detail_data[i][3])== pid )
                return "<input type='tel' placeholder='请填写数量（手）' maxlength='4' value="+detail_data[i][2]+"  class='infor_txt infor_num' title='stock' />";
        }
    }
    function getprice(type,pid) {
        for(var i=0;i<detail_data.length;i++)
        {
            if(detail_data[i][1]==type && parseInt(detail_data[i][3])== pid )
                return "<input type='text' placeholder='请填写价格' maxlength='11' value="+detail_data[i][2]+"  class='infor_txt infor_price' title='price' />";
        }
    }
</script>
<body>
<div id="box_information">
    <div class="wrap">
        <div class="main_information">
            @if(isset($colors))
                @foreach($colors as $color)
                    <div class="information" id="{{ $color->id }}">
                        <ul>
                            <li class="information_li">
                                <div class="iconImg img1">
                                    <img src="/img/00014.png" alt="" />
                                </div>
                                <span class="information_sp">颜色：</span>

                                <input type="text" maxlength="4" value="{{ $color->produc_val }}" placeholder="请填写颜色(最长4个字)" class="information_txt" />
                            </li>
                            <li class="information_li">
                                <div class="iconImg"></div>
                                <span class="information_sp">价格：</span>
                                <script>document.write(getprice('price','{{ $color->id }}'));</script>
                            </li>
                            <li class="information_li">
                                <div class="iconImg"></div>
                                <span class="information_sp">数量：</span>
                                <script>document.write(getstock('stock','{{ $color->id }}'));</script>
                            </li>
                        </ul>
                    </div>
                @endforeach
            @endif

            <!--添加-->
                <div class="information_over">
                    <div class="add_success" id="yann-add-info" style="display: block;">添加颜色</div>
                </div>
        </div>

    </div>
    <div class="infor_footer_box">
        <div class="infor_footer">
            <div class="footer_l">
                <div class="footerImg"><img src="/img/00014.png" alt="" /></div>
                <span>全选</span>
            </div>
            <div class="footer_r"><a class="footer_a" href="javascript:;">删除</a></div>
            <div class="infor_save produc_save"><a class="infor_a" href="javascript:;">完成</a></div>
        </div>
    </div>
    <div class="save_success" style="display: none;"></div>
    <meta name="csrf_token" id="token" content="{{ csrf_token() }}">
    @include('public.delete_tips')
</div>
</body>
<script>
    is_weixn('.infor_footer_box');
    /*iphoneX*/
    var str= navigator.userAgent.toLowerCase();
    var ver=str.match(/cpu iphone os (.*?) like mac os/);
    if(ver && $(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
        $(".infor_footer_box").css("height","3.499rem");
        $(".wrap").css("bottom","2.944rem");
    }
	/*点击键盘backspace键清空验证码*/
	$(document).on("keydown",".information_txt",function(event){
		event=event||window.event;
	    if (event.keyCode == 8) {	    
	        $(this).val("")
	    }
	});
    $(".infor_price").bind("input","onpropertychange",function(){
        $(this).val($(this).val().replace(/[^\d.]/g,""));
        $(this).val($(this).val().replace(/\.{2,}/g,"."));
        $(this).val($(this).val().replace(/^\./g,""));
        $(this).val($(this).val().replace(".","$#$").replace(/\./g,"").replace("$#$","."));
        $(this).val($(this).val().replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'));
        if($(this).val().indexOf(".")< 0 && $(this).val() !=""){
            $(this).val(parseFloat($(this).val()));
        }
    });
    $(".infor_num").bind("input","onpropertychange",function(){
        $(this).val($(this).val().replace(/[^\d]/g,""));
    });
    $('.produc_save').click(function () {
        $('.save_success').text('保存成功');
        $('.save_success').show();
        setTimeout(function(){
            $('.save_success').hide();
            window.location.href = '/Business/producList';
        },1000);
    });
    var prostyle = "<ul> <li class='information_li'> <div class='iconImg img1'> <img src='/img/00014.png'/> </div> " +
            "<span class='information_sp'>颜色：</span> <input type='text' maxlength='4' placeholder='请填写颜色(最长4个字)' class='information_txt' value='' /> </li> " +
            "<li class='information_li'> <div class='iconImg'></div> " +
            "<span class='information_sp'>价格：</span> " +
            "<input type='text' placeholder='请填写价格' maxlength='11' value='{{ $price }}'  class='infor_txt infor_price' title='price' /></li> " +
            "<li class='information_li'> <div class='iconImg'></div> " +
            "<span class='information_sp'>数量：</span> " +
            "<input type='tel' placeholder='请填写数量（手）' maxlength='4' value='0'  class='infor_txt infor_num' title='stock' /></li> </ul>";

        $('#yann-add-info').click(function () {
        var proid = '{{ $_GET['productId'] }}';
        var price = '{{ $price }}';
        if($(".information").length<=11){
            $.ajax({
                url:'/Business/setProductStyle',
                type:'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{proid:proid,price:price},
                dataType:'json',
                success:function(data){
                    if(data.success == true)
                    {
//                    $('.main_information').prepend();
                        $('.information_over').before("<div class='information' id="+data.info+">"+ prostyle+"</div>");
                        return true
                    }else{
                        userMsg(data.msg)
                    }
                }
            })
        }else{
            $(".save_success").text("最多添加十二种颜色");
            $(".save_success").show(0).delay(1000).hide(0);
        }
    });
    $(document).on('blur','.information_txt',function () {
        var pid = $(this).parent().parent().parent('.information').attr('id');
        var val = $(this).val();
        $.ajax({
            url:'/Business/setProductStyleVal',
            type:'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            data:{id:pid,val:val},
            dataType:'json',
            success:function(data){
                if(data.success == true)
                {

                }else{
                    userMsg(data.msg)
                }
            }
        })
    });
    $(document).on('blur','.infor_txt',function () {
        var pid = $(this).parent().parent().parent('.information').attr('id');
        var type = $(this).attr('title');
        var val = $(this).val();
        if(type == 'price')
        {
            var exp = /^([1-9]{1}[0-9]{0,11}|[0]{1})(\.[0-9]{1,2})?$/;
            if(!exp.test(val))
            {
                userMsg('格式错误');
                return false;
            }
        }

        if(isNaN(val) || val < 0)
        {
            userMsg('格式错误');
            return false;
        }
        $.ajax({
            url: '/Business/setProductSizeVal',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            data: {pid: pid, type: type, val: val},
            dataType: 'json',
            success: function (data) {
                if (data.success == true) {

                } else {
                    userMsg(data.msg)
                }
            }
        })
    });
    $(document).on('click','.img1',function () {
        if($(this).children('img').attr('src') == '/img/00014.png')
        {
            $(this).children('img').attr('src','/img/00012.png');
        }else{
            $(this).children('img').attr('src','/img/00014.png');
        }
        var id = '';
        $('.img1').each(function () {
            if($(this).children('img').attr('src') == '/img/00012.png')
                id += $(this).parent().parent().parent('.information').attr('id')+",";
        });
    });
    $('.footerImg').click(function () {
        if($(this).children('img').attr('src') == '/img/00014.png')
        {
            $(this).children('img').attr('src','/img/00012.png');

            $('.img1').children('img').attr('src','/img/00012.png');
        }else{
            $(this).children('img').attr('src','/img/00014.png');
            $('.img1').children('img').attr('src','/img/00014.png');
        }
        var id = '';
        $('.img1').each(function () {
            if($(this).children('img').attr('src') == '/img/00012.png')
                id += $(this).parent().parent().parent('.information').attr('id')+",";
        });
    });
    $('.footer_a').click(function () {
        var id = '';
        $('.img1').each(function () {
            if($(this).children('img').attr('src') == '/img/00012.png')
                id += $(this).parent().parent().parent('.information').attr('id')+",";
        });
        if(id.length <= 0)
        {
            userMsg('请勾选要删除的款式')
            return false;
        }
        $('.delDiv').show();
        $('.mask').show();


    });

$('#btnCancel').click(function () {
    $('.delDiv').hide();
    $('.mask').hide();
});

$('#btnDelTrue').click(function () {
    var id = '';
    $('.img1').each(function () {
        if($(this).children('img').attr('src') == '/img/00012.png')
            id += $(this).parent().parent().parent('.information').attr('id')+",";
    });
    if(id.length > 0)
    {
        $.ajax({
            url: '/Business/delProductColor',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            data: {id:id},
            dataType: 'json',
            success: function (data) {
                if (data.success == true) {
                    $('.img1').each(function () {
                        if($(this).children('img').attr('src') == '/img/00012.png')
                            $(this).parent().parent().parent('.information').remove();
                    });
                    $('.footerImg').children('img').attr('src','/img/00014.png')
                    userMsg('删除成功');
                } else {
                    userMsg(data.msg)
                }
                $('.delDiv').hide();
                $('.mask').hide();
            }
        })
    }else{
        userMsg('请勾选要删除的款式')
    }
});
    function userMsg(msg) {
        $('.save_success').html(msg);
        $('.save_success').show();
        setTimeout(function () {
            $('.save_success').hide();
        },1000);
    }
</script>
</html>
